<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Folder } from '@element-plus/icons-vue'
import TitleBar from '@/components/common/TitleBar.vue'

// 语料类型
const radio1 = ref('2')
const tableData = reactive<
  {
    fileName: string
    date: string
    status: string
    result: string
  }[]
>([
  {
    fileName: '北京金税知识编辑3301-3581.docx',
    date: '2019-01-01 11:30',
    status: 'done',
    result: 'warning',
  },
  {
    fileName: '北京金税知识编辑3301-3581.docx',
    date: '2019-01-01 11:30',
    status: 'done',
    result: 'warning',
  },
  {
    fileName: '北京金税知识编辑3301-3581.docx',
    date: '2019-01-01 11:30',
    status: 'done',
    result: 'warning',
  },
])
</script>

<template>
  <div class="container">
    <title-bar>语料包上传</title-bar>

    <div class="main">
      <el-row :gutter="10" class="label-wrap">
        <el-col :span="8">
          <span class="label">语料类型</span>
        </el-col>
        <el-col :span="8">
          <span class="label">选择要上传的文件</span>
        </el-col>
      </el-row>

      <el-row :gutter="10" class="form-wrap">
        <el-col :span="8">
          <el-radio-group v-model="radio1">
            <el-radio value="1" size="large">Excel</el-radio>
            <el-radio value="2" size="large">Word</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="8">
          <el-input readonly>
            <template #append>
              <el-button :icon="Folder" />
            </template>
          </el-input>
        </el-col>

        <el-col :span="6">
          <el-button type="primary">上传</el-button>
        </el-col>
      </el-row>

      <div class="tips">
        <p>
          请<el-link
            href="https://element-plus.org"
            target="_blank"
            style="font-size: 0.85rem; color: #409eff; vertical-align: baseline"
            >点击下载模板</el-link
          >，按指定格式添加语料：
        </p>
        <p>1.文件格式：Excel，文件大小不能超过 8MB；</p>
        <p>2.问题和答案仅支持文字和 emoji 表情，不支持图片，问题和答案必填，相似问法选填；</p>
        <p>3.不能录入重复问题,不能出现空白行,详情请参考模板。</p>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="fileName" label="文件名" :min-width="200" />
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="status" label="导入状态" />
        <el-table-column prop="result" label="导入结果" />
        <el-table-column label="原文件">
          <template #default>
            <el-button link type="primary">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column label="导入日志">
          <template #default>
            <el-button link type="primary">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.main {
  padding: 20px;
}

.main .label-wrap {
  margin-bottom: 10px;
}

.main .label {
  font-size: 0.9rem;
}

.main .tips {
  font-size: 0.85rem;
  color: #333;
}

.main .tips > p {
  margin-bottom: 10px;
}
</style>
